<template>
  <div class='comment-records-wrapper'>
    <div class='comment-records-avatar'>
      <img :src="record.avatar" v-show='record.avatar'>
    </div>
    <div class='comment-records-detail'>
      <div class='detail-title'>
        <span class='detail-title-nickname'>{{record.nickname}}</span>
        <span class='detail-title-time'>{{formatCommentTime(record.createTime)}}</span>
      </div>
      <div class='detail-content'>{{record.content}}</div>
      <div class='detail-reply' v-show='!startReply'>
        <span @click='startReply = true'>回复</span>
      </div>
      <div class='detail-reply-input' v-if='startReply'>
        <comment-input @cancel='startReply = false' @send='sendReply'></comment-input>
      </div>
      <ul class='detail-sub-list'>
        <li class='detail-sub' v-for='(subRecord, index) of record.children' :key='"subComment" + index'>
          <comment-records-sub :record='subRecord'></comment-records-sub>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import commentRecordsSub from '@/components/comment-records-sub'
import commentInput from '@/components/comment-input'
export default {
  name: 'commentRecords',
  components: {
    commentRecordsSub,
    commentInput
  },
  data () {
    return {
      startReply: false
    }
  },
  props: {
    record: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    sendReply (text) {
      // alert(text)
      this.startReply = false
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang='stylus'>
.comment-records-wrapper
  display flex
  .comment-records-avatar
    flex none
    width 34px
    height 34px
    border-radius 50%
    background #ddd
    overflow hidden
    img
      width 100%
      height 100%
      border-radius 50%
  .comment-records-detail
    padding-left 15px
    flex 1
    width 0
    .detail-title
      font-size 0
      margin-bottom 7px
      display flex
      align-items flex-end
      .detail-title-nickname
        font-size 14px
        margin-right 10px
        color #000
        noWrap()
      .detail-title-time
        flex none
        font-size 10px
        color #aaa
    .detail-content
      color #555
      font-size 12px
      line-height 1.5
      margin-bottom 7px
    .detail-reply
      font-size 11px
      color #aaa
    .detail-reply-input
      padding-right 30px
    .detail-sub-list
      margin-left -6px
</style>
